<!--
    @作者：814878176@qq.com
    @时间：2020-03-30
    @描述：自定义底部导航栏
	@使用：
		在main.js全部引入：
			import tabBar from "@/pages/common/tabBar.vue"
			Vue.component('tabBar', tabBar)
		
		在需要显示的页面底部添加：
		<view>
			上面是内容块：
			<view class="uni-p-b-98"></view>
			<tabBar :pagePath="'/pages/tabBar/home/home'"></tabBar>
		</view>
		
		子页面右上角图标返回首页的写法：
		/**
		 * 返回首页
		 */
		onNavigationBarButtonTap(e) {
			uni.reLaunch({
				url: '/pages/tabBar/home/home'
			});
		},
		
 -->
<template>
	<view class="uni-tabbar">
		<image class="img-bg" src="../../static/tabBar/bg.png" mode="widthFix"></image>
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<view class="uni-tabbar__bd">
				<view class="uni-tabbar__icon">
					<image v-if="item.pagePath == pagePath" class="uni-image" mode="aspectFit" :src="item.selectedIconPath"></image>
					<image v-else class="uni-image" mode="aspectFit" :src="item.iconPath"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pagePath: null,
			rootPath: null
		},
		data() {
			return {
				page: 'contact',
				showPage: false,
				containerHeight: 400,
				tabbar: [
					{
						"pagePath": "/index",
						"iconPath": "/static/tabBar/tabar_1.png",
						"selectedIconPath": "/static/tabBar/tabar_1.png",
						"text": "活动首页",
						"fontIcon": "icon-shouye"
					},
					{
						"pagePath": "/introduce",
						"iconPath": "/static/tabBar/tabar_2.png",
						"selectedIconPath": "/static/tabBar/tabar_2.png",
						"text": "活动介绍",
						"fontIcon": "icon-guanli"
					},
					{
						"pagePath": "/distribute",
						"iconPath": "/static/tabBar/tabar_3.png",
						"selectedIconPath": "/static/tabBar/tabar_3.png",
						"text": "人员分布",
						"fontIcon": "icon-wode"
					},
					{
						"pagePath": "/record",
						"iconPath": "/static/tabBar/tabar_4.png",
						"selectedIconPath": "/static/tabBar/tabar_4.png",
						"text": "我的记录",
						"fontIcon": "icon-wode"
					}
				]
			};
		},
		mounted() {
			
		},
		methods: {
			changeTab(item) {
				this.page = item.pagePath;
				uni.navigateTo({
				    url: "/pages/" + this.rootPath + this.page
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;   /* 居中对齐 */
		height: 130upx;
		line-height: 130upx;
		padding: 16upx 0;
		box-sizing: border-box;
		border-top: none;
		background: rgba(255,255,255,0);
		box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
		.img-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.uni-tabbar__item {
			display: block;
			line-height: 130upx;
			font-size: 20upx;
			text-align: center;
		}
		.uni-tabbar__icon {
			// height: 42upx;
			// line-height: 42upx;
			text-align: center;
			.uni-image {
				width: 112upx;
				height: 82upx;
				vertical-align: middle;
			}
		}
		.icon {
			display: inline-block;
		}
		.uni-tabbar__label {
			line-height: 24upx;
			font-size: 24upx;
			color: #999;
			&.active {
				color: #1ca6ec;
			}
		}
	}
</style>
